<template>
	<view class="container">
		<!-- 第一种tabs - 下划线样式 -->
		<view class="tabs-section">
			<view class="section-title">下划线风格</view>
			<my-tabs v-model="activeTab1" :tabs="tabList" @change="handleTabChange">
				<view class="tab-content" v-if="activeTab1 === 0">
					<text>标签1的内容</text>
				</view>
				<view class="tab-content" v-if="activeTab1 === 1">
					<text>标签2的内容</text>
				</view>
				<view class="tab-content" v-if="activeTab1 === 2">
					<text>标签3的内容</text>
				</view>
			</my-tabs>
		</view>

		<!-- 第二种tabs - 背景块滑动样式 -->
		<view class="tabs-section">
			<view class="section-title">背景块风格</view>
			<my-tabs-block v-model="activeTab2" :tabs="tabList" @change="handleTabChange">
				<view class="tab-content" v-if="activeTab2 === 0">
					<text>标签1的内容</text>
				</view>
				<view class="tab-content" v-if="activeTab2 === 1">
					<text>标签2的内容</text>
				</view>
				<view class="tab-content" v-if="activeTab2 === 2">
					<text>标签3的内容</text>
				</view>
				<view class="tab-content" v-if="activeTab2 === 3">
					<text>标签4的内容</text>
				</view>
			</my-tabs-block>
		</view>

		<!-- picker1 -->
		<wsx-picker-search ref="pickerRef" :options="list" v-model="value"></wsx-picker-search>
		<!-- picker2 -->
		<zqs-select :multiple="false" :list="options" :showSearch="false" label-key="label" value-key="value"
			title="选择引进人" clearable v-model="importUserId"></zqs-select>
	</view>
</template>

<script>
	import CheckIn from '../../componments/CheckIn/index.vue'
	import Calerdar from '../../componments/Calendar/index.vue'
	import MyTabs from '../../componments/my-tabs/my-tabs.vue'
	import MyTabsBlock from '../../componments/my-tabs-block/my-tabs-block.vue'
	import zqsSelect from '@/components/zqs-select/zqs-select.vue'
	export default {
		components: {
			CheckIn,
			Calerdar,
			MyTabs,
			MyTabsBlock,
			zqsSelect
		},
		data() {
			return {
				activeTab1: 0,
				activeTab2: 0,
				tabList: [{
						title: '标签1'
					},
					{
						title: '标签2'
					},
					{
						title: '标签3'
					},
					{
						title: '标签4'
					}
				],
				value: 3,
				list: [{
					value: 1,
					label: '苹果'
				}, {
					value: 2,
					label: '香蕉'
				}, {
					value: 3,
					label: '葡萄'
				}, {
					value: 4,
					label: '榴莲'
				}, {
					value: 5,
					label: '百香果'
				}],
				importUserId: '',
				options: [{
						label: '沃尔玛（WALMART)',
						value: '0',
					},
					{
						label: '国家电网有限公司（STATE GRID)',
						value: '1',
					},
					{
						label: '中国石油天然气集团有限公司',
						value: '2',
					},
					{
						label: '苹果公司（APPLE)',
						value: '3',
					},
					{
						label: 'CVSHealth公司（CVS HEALTH)',
						value: '4',
					},
					{
						label: '联合健康集团（UNITEDHEALTH GROUP)',
						value: '5',
					},
					{
						label: '丰田汽车公司（TOYOTA MOTOR)',
						value: '6',
					},
				],
			}
		},
		onLoad() {

		},
		methods: {
			handleTabChange(index) {
				console.log('切换到标签:', index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
	}

	.tabs-section {
		margin-bottom: 40rpx;

		.section-title {
			font-size: 28rpx;
			color: #666;
			padding: 20rpx;
			margin-bottom: 10rpx;
		}
	}

	.tab-content {
		padding: 30rpx;
		text-align: center;
		font-size: 28rpx;
		color: #333;
	}
</style>